<template>
	<div>
    <!-- 新增/编辑人员 -->
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" @close="close(1)" width="600px">
      <div v-if="dialogStatus === 'create'">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="top">
          <el-row>
            <el-col :span="20">
              <el-form-item label="配电工程安全施工交底单" prop="workList">
                <el-select v-model="temp.workList" style="width: 100%;" multiple placeholder="请选择">
                  <el-option v-for="item in distributing" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="各类作业现场安全交底记录单" prop="bottomList">
                <el-select v-model="temp.bottomList" style="width: 100%;" multiple placeholder="请选择">
                  <el-option v-for="item in safetyBottom" :label="item.label" :value="item.value" :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="特种车辆安全交底单" prop="safetyList">
                <el-upload
                  class="upload-demo"
                  action=""
                  :on-remove="safetyRemove"
                  :on-success="safetySuccess"
                  :before-upload="beforUpload"
                  :limit="5"
                  :http-request="safetyUpload"
                  :on-exceed="safetyExceed"
                  accept=".pdf,.docx,.doc,.jpg,.png"
                  :file-list="temp.safetyList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">可上传word/pdf/jpg/png, 上传最大5M, 最多上传5个文件</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close(1)">
            取消
          </el-button>
          <el-button type="primary" @click="createWork()">
            确认
          </el-button>
        </div>
      </div>
      <div v-else>
        <el-form label-position="top">
          <el-row>
            <el-col :span="20">
              <el-form-item label="配电工程安全施工交底单">
                <div v-if="detailList && detailList.length>0">
                  <a v-for="item in detailList[0].attachments" href="#" @click="downfile(item.url)">{{ item.name }}</a>
                </div>
                <!-- <div class="img_box">
                  <img @click="openImg" src="../../../assets/img/img.png" />
                </div> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="各类作业现场安全交底记录单">
                <div v-if="detailList && detailList.length>1">
                  <a v-for="item in detailList[1].attachments" href="#" @click="downfile(item.url)">{{ item.name }}</a>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="特种车辆安全交底单">
                <div v-if="detailList && detailList.length>2">
                  <a v-for="item in detailList[2].attachments" href="#" @click="downfile(item.url)">{{ item.name }}</a>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- <el-image-viewer v-if="showImgFlag" :on-close="()=>{showImgFlag=false}" :url-list="imgList"></el-image-viewer> -->
    </el-dialog>
	</div>
</template>

<script>
  import { getDics } from '@/api/utils/index'
  import { jobTicketSave, getJobTicket } from '@/api/ticket/index'
  const files1 = [
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/101.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/102.doc',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/103.doc',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/104.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/105.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/106.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/107.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/108.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/109.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/110.doc',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/111.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/112.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/113.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/114.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/115.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/116.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/117.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/118.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/119.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/120.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/121.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/1/122.doc'
  ]
  const files2 = [
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/201.doc',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/202.doc',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/203.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/204.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/205.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/206.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/207.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/208.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/209.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/210.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/211.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/212.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/213.docx',
    'https://newjieyin.oss-cn-beijing.aliyuncs.com/ticket/2/214.docx'
  ]
	export default {
		name: 'userDialog',
    props: {
      workDialog: {
        type: Boolean
      },
      dialogStatus: {
        type: String
      },
      surveyId: {
        type: Number
      }
    },
    components: {
      // 'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
		data() {
			return {
        detailList: [],
        elLoading: false,
        showImgFlag: false,
        imgList: [],
        // https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1698156986124kVXBi.png
        // https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1698157013807Lynzi.png
        temp: {
          workList: [
            // {
            //   name: 'test',
            //   url: 'https://newjieyin.oss-cn-beijing.aliyuncs.com/violation/ticket/1698156986124kVXBi.png'
            // }
          ],
          bottomList: [],
          safetyList: []
        },
        textMap: {
					create: '上传交底单',
					detail: '查看交底单'
				},
        //配电工程
        distributing: [],
        //安全交底
        safetyBottom: [],
				dialogFormVisible: false,
        rules: {
          workList: [
            { type: 'array', required: true, message: '请选择配电工程安全施工交底单' }
          ],
          bottomList: [
            { type: 'array', required: true, message: '请选择安全交底记录单' }
          ],
          safetyList: [
            { type: 'array', required: true, message: '请上传特种车辆安全交底单' }
          ],
        },
			};
		},
		mounted() {
			this.dialogFormVisible = this.workDialog
      if(this.dialogStatus === 'create') {
        this.getDicsList()
      } else {
        this.getDetail()
      }
		},
		methods: {
      downfile(url) {
        window.location.href = url
      },
      getDetail() {
        getJobTicket({id: this.surveyId}).then(res => {
          this.detailList = res.data
        })
      },
      getDicsList() {
        getDics(['jobTicketType']).then(res=>{
          const { jobTicketType } = res.data
          for (let i in jobTicketType) {
            let num = parseInt(i)
            if(num > 100 && num < 200) {
              this.distributing.push({
                value: num,
                label: jobTicketType[i]
              }); 
            } else if(num > 200 && num < 300) {
              this.safetyBottom.push({
                value: num,
                label: jobTicketType[i]
              }); 
            }
            
          }
          this.distributing = this.distributing.map((item, index)=> { return {value: item.value, label: item.label, url: files1[index]} } )
          this.safetyBottom = this.safetyBottom.map((item, index)=> { return {value: item.value, label: item.label, url: files2[index]} } )
        })
      },
      openImg() {
        this.imgList = [require('../../../assets/img/img.png')];
        this.showImgFlag = true;
      },
			close(type) {
        this.$emit('close', type)
      },
      createWork() {
        this.$refs['dataForm'].validate((valid) => {
					if (valid) {
            let obj = {...this.temp}
            let arr1 = [], arr2 = [], arr3 =[]

            obj.workList.forEach(item1 => {
              this.distributing.forEach(item2 => {
                if(item1 === item2.value) {
                  arr1.push({
                    name: item2.label,
                    url: item2.url
                  })
                }
              })
            })

            obj.bottomList.forEach(item1 => {
              this.safetyBottom.forEach(item2 => {
                if(item1 === item2.value) {
                  arr2.push({
                    name: item2.label,
                    url: item2.url
                  })
                }
              })
            })
            
            arr3 = obj.safetyList.map(item=> { return {name: item.name, url: item.url} } )

            let params = [
              {
                schemeId: this.surveyId,
                type: 1,
                attachments: arr1
              },
              {
                schemeId: this.surveyId,
                type: 2,
                attachments: arr2
              },
              {
                schemeId: this.surveyId,
                type: 3,
                attachments: arr3
              },
            ]

            this.openLoading()
            jobTicketSave(params).then(()=>{
              this.closeLoading()
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.$emit('close', 2)
            }).catch(err=>{
              this.closeLoading()
            })
						
					}
				})
      },
      beforUpload(file) {
        // const isImg = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5MB!');
        }
        // if (!isImg) {
        //   this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        // }
        // return isLt5M && isImg;
        return isLt5M;
      },

      //特种安全交底单
      safetyUpload(option) {
        this.$ossUpload({
          path: option.file.name,
          file: option.file,
          folder: "ticket",
          done: res => {
            let fileUrl = res.res.requestUrls[0].split("?")[0];
            option.onSuccess(fileUrl)
          },
          fail: err => {
            console.log(err)
          }
        });
      },
      safetyRemove(file, fileList) {
        this.temp.safetyList = fileList
      },
      safetySuccess(res, file, fileList) {
        fileList.forEach(item => {
          if(item.uid === file.uid) item.url = res
        });
        this.temp.safetyList = fileList;
      },
      safetyExceed(files, fileList) {
        this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      openLoading(){
        this.elLoading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      },
      closeLoading(){
        this.elLoading.close();
      },
		},
	}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
.img_box {
  img {
    cursor: pointer;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    object-fit: cover;
  }
}
</style>
